<template>
  <div class="equipment-list-container">
    <!-- 搜索框区域 -->
    <div class="search-wrap">
      <div class="search-input-box">
        <form action="/">
          <van-search
            v-model="searchOptions.searchKey"
            show-action
            shape="round"
            placeholder="搜索设备名称/设备编号/产线识别号"
            @search="searchOptions.handleSearch"
            @clear="searchOptions.handleClear"
          >
            <template #action>
              <div
                class="filter-box"
                @click="searchOptions.handleFilter"
              >
                <i class="iconfont iconshaixuan"></i>
                <span>筛选</span>
              </div>
            </template>
          </van-search>
        </form>
      </div>
    </div>

    <!-- 设备列表区域 -->
    <div
      class="equ-list-wrap"
      v-if="equipmentList.length"
    >
      <ul class="equ-list-box">
        <li
          v-for="(item, index) in equipmentList"
          :key="index"
          class="content-list-item"
          @click="jumpDetail(item)"
        >
          <div
            class="img-box"
            v-if="item.cover"
          >
            <img :src="item.cover">
          </div>
          <div
            class="img-box cover-empty"
            v-else
          >
            <img src="@/assets/images/device_default.png">
          </div>
          <div class="device-type-status">
            <div
              class="icon-box-status1"
              v-if="item.device_status === 1"
            >
              <i class="iconfont iconlixian"></i>
              <span>{{item.device_status | handleStatus(item.device_status)}}</span>
            </div>
            <div
              class="icon-box-status2"
              v-if="item.device_status === 2"
            >
              <i class="iconfont iconzaixian"></i>
              <span>{{item.device_status | handleStatus(item.device_status)}}</span>
            </div>
            <!-- 预警暂时还没有 -->
            <!-- <div
              class="icon-box-status3"
              v-if="item.device_status === 3"
            >
              <i class="iconfont iconlixian"></i>
              <span>{{item.device_status | handleStatus(item.device_status)}}</span>
            </div> -->
            <div
              class="icon-box-status4"
              v-if="item.device_status === 4"
            >
              <i class="iconfont iconyubaojing"></i>
              <span>{{item.device_status | handleStatus(item.device_status)}}</span>
            </div>
            <span class="device-type">{{item.device_type_name}}</span>
          </div>
          <div class="demo-title">{{item.device_name}}</div>
          <div class="demo-shop">编号：{{item.device_number}}</div>
        </li>
      </ul>
    </div>

    <!-- 无数据 -->
    <div
      class="no-data-box"
      v-if="noDataState"
    >暂无数据</div>

    <EquiFilter
      v-show="showProjectFilter"
      :projectId="projectId"
      @submit="submitFilter"
    ></EquiFilter>
  </div>
</template>

<script>
import { Search } from 'vant';
import EquiFilter from './EquiFilter.vue';
import { getProjectDetail, getDeviceList, getDeviceDetail } from '@/api/projectManage';

export default {
  name: 'EquipmentList',
  props: {
    projectId: Number // 项目id
  },
  components: {
    [Search.name]: Search,
    EquiFilter
  },
  data() {
    return {
      // 搜索相关配置
      searchOptions: {
        searchKey: '',
        handleSearch: this.getEquipmentListEvent,
        handleClear: this.getEquipmentListEvent,
        handleFilter: this.handleFilter
      },

      showProjectFilter: false, // 控制筛选封装组件显示与隐藏

      projectDetail: {}, // 项目详情
      equipmentList: [], // 设备列表数据,
      deviceTypeId: '', // 设备类型id
      deviceStatus: '', // 设备状态
      noDataState: false
    };
  },
  created() {
    this.getProjectDetailEvent();
  },
  methods: {
    // 获取项目详情
    getProjectDetailEvent() {
      const params = {
        project_id: this.projectId // 项目id
      };
      getProjectDetail(params)
        .then(res => {
          const resData = res.data;
          resData.send_time2 = this.formatDate(resData.send_time);
          resData.debug_time2 = this.formatDate(resData.debug_time);
          resData.acceptance_time2 = this.formatDate(resData.acceptance_time);
          resData.warranty_time2 = this.formatDate(resData.warranty_time);

          // 发货时间
          resData.send_time = resData.send_time * 1000;
          let sendTime = resData.send_time;
          // 调试时间
          resData.debug_time = resData.debug_time * 1000;
          let debugTime = resData.debug_time;
          // 验收时间
          resData.acceptance_time = resData.acceptance_time * 1000;
          let acceptanceTime = resData.acceptance_time;
          // 质保时间
          resData.warranty_time = resData.warranty_time * 1000;
          let warrantyTime = resData.warranty_time;
          // 判断 质保时间、验收时间、调试时间、发货时间
          // 当前时间
          let currentDateTime = new Date().getTime();
          // 已过保
          if (warrantyTime < currentDateTime) {
            resData.project_status = '已过保';
          } else {
            // 未过保
            // 有验收时间
            if (resData.acceptance_time) {
              // 已验收
              // 超过验收时间
              if (acceptanceTime < currentDateTime) {
                resData.project_status = '已验收';
              } else {
                // 未超过验收时间
                // 有调试时间
                if (resData.debug_time) {
                  // 超过调试时间
                  if (debugTime < currentDateTime) {
                    resData.project_status = '已交付';
                  } else {
                    // 未超过调试时间
                    // 有发货时间
                    if (resData.send_time) {
                      // 超过发货时间
                      if (sendTime < currentDateTime) {
                        resData.project_status = '试运行';
                      } else {
                        // 未超过发货时间
                        resData.project_status = '未知';
                      }
                    } else {
                      // 无发货时间
                      resData.project_status = '未知';
                    }
                  }
                } else {
                  // 无调试时间
                  // 有发货时间
                  if (resData.send_time) {
                    // 超过发货时间
                    if (sendTime < currentDateTime) {
                      resData.project_status = '试运行';
                    } else {
                      // 未超过发货时间
                      resData.project_status = '未知';
                    }
                  } else {
                    // 无发货时间
                    resData.project_status = '未知';
                  }
                }
              }
            } else {
              // 无验收时间
              // 有调试时间
              if (resData.debug_time) {
                // 超过调试时间
                if (debugTime < currentDateTime) {
                  resData.project_status = '已交付';
                } else {
                  // 未超过调试时间
                  // 有发货时间
                  if (resData.send_time) {
                    // 超过发货时间
                    if (sendTime < currentDateTime) {
                      resData.project_status = '试运行';
                    } else {
                      // 未超过发货时间
                      resData.project_status = '未知';
                    }
                  } else {
                    // 无发货时间
                    resData.project_status = '未知';
                  }
                }
              } else {
                // 无调试时间
                // 有发货时间
                if (resData.send_time) {
                  // 超过发货时间
                  if (sendTime < currentDateTime) {
                    resData.project_status = '试运行';
                  } else {
                    // 未超过发货时间
                    resData.project_status = '未知';
                  }
                } else {
                  // 无发货时间
                  resData.project_status = '未知';
                }
              }
            }
          }

          this.projectDetail = resData;
        })
        .then(res => {
          // 获取设备列表
          this.getEquipmentListEvent();
        });
    },
    // 获取设备列表
    getEquipmentListEvent() {
      this.equipmentList = [];
      const params = {
        project_line_id: this.projectDetail.product_line, // 产线id
        search: this.searchOptions.searchKey, // 输入设备名称/设备编号/产线识别号查找
        device_type_id: this.deviceTypeId // 设备类型
      };
      getDeviceList(params).then(res => {
        // 判断是否选择设备状态
        if (this.deviceStatus) {
          if (res.data.list && res.data.list.length) {
            const resData = res.data.list;
            let filterArr = resData.filter(item => {
              return item.device_status === this.deviceStatus;
            });
            this.equipmentList = filterArr;
            this.noDataState = false;
          } else {
            this.equipmentList = [];
            this.noDataState = true;
          }
        } else {
          if (res.data.list && res.data.list.length) {
            this.equipmentList = res.data.list;
            this.noDataState = false;
          } else {
            this.equipmentList = [];
            this.noDataState = true;
          }
        }
      });
    },

    // 筛选
    handleFilter() {
      this.showProjectFilter = true;
    },

    // 筛选组件的确定按钮
    submitFilter(params) {
      if (params.project_line_id) this.projectDetail.product_line = params.project_line_id;
      this.deviceTypeId = params.device_type_id;
      this.deviceStatus = params.device_status;
      this.getEquipmentListEvent();
      this.showProjectFilter = false;
    },

    // 设备详情
    jumpDetail(item) {
      const params = {
        id: item.device_id
      };
      getDeviceDetail(params).then(res => {
        if (this.$checkBtnPermission('deviceCenter:deviceManage:list:detail')) {
          this.$router.push({
            name: 'deviceDetail',
            query: {
              id: res.data.ID,
              deviceName: res.data.name,
              videoId: res.data.videoId, // 视频id
              modelId: res.data.modelId,
              modelName: res.data.model_name,
              controlPwd: res.data.controlPwd // 实时数据
            }
          });
        } else {
          this.$toast(this.$store.state.noDetailPermissionText);
        }
      });
    },

    // 格式化日期
    formatDate(now) {
      let dt = new Date(now * 1000);
      let year = dt.getFullYear();
      let month = dt.getMonth() + 1;
      month = month < 10 ? '0' + month : month;
      let date = dt.getDate();
      date = date < 10 ? '0' + date : date;
      return `${year}-${month}-${date}`;
    }
  },
  filters: {
    // 处理设备状态
    handleStatus(num) {
      let deviceStatusText = '';
      switch (num) {
        case 1:
          deviceStatusText = '离线';
          break;
        case 2:
          deviceStatusText = '在线';
          break;
        case 3:
          deviceStatusText = '预警';
          break;
        case 4:
          deviceStatusText = '报警';
          break;
      }
      return deviceStatusText;
    }
  }
};
</script>

<style lang="scss" scoped>
.equipment-list-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  // 搜索框区域
  .search-wrap {
    background-color: #ffffff;
    .search-input-box {
      height: 1.6rem;
      padding-right: 0.16rem;
      .van-search {
        height: 100%;
      }
      .filter-box {
        color: #666666;
      }
    }
  }

  // 设备列表区域
  .equ-list-wrap {
    flex: 1;
    height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .equ-list-box {
      display: grid;
      grid-template-columns: repeat(auto-fill, 4.893333rem);
      grid-column-gap: 0.213333rem;
      grid-row-gap: 0.213333rem;
      padding: 0.213333rem 0 0;

      .content-list-item {
        background-color: #ffffff;
        border-radius: 0.106667rem;
        padding: 0.32rem;
        .img-box {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 4.266667rem;
          height: 2.28rem;
          border: 1px solid #ebeef5;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .cover-empty {
          background-color: #f9f9f9;
          img {
            width: 40%;
            height: 70%;
          }
        }
        .device-type-status {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 0.213333rem;
          // 离线
          .icon-box-status1 {
            display: flex;
            align-items: center;
            font-size: 0.266667rem;
            color: #999999;
            span {
              font-size: 0.346667rem;
              margin-left: 0.08rem;
            }
          }
          // 在线
          .icon-box-status2 {
            display: flex;
            align-items: center;
            font-size: 0.266667rem;
            color: #67c23a;
            span {
              font-size: 0.346667rem;
              margin-left: 0.08rem;
            }
          }
          // 报警
          .icon-box-status4 {
            display: flex;
            align-items: center;
            font-size: 0.266667rem;
            color: #f56c6c;
            span {
              font-size: 0.346667rem;
              margin-left: 0.08rem;
            }
          }
          .device-type {
            width: 1.12rem;
            height: 0.48rem;
            line-height: 0.48rem;
            text-align: center;
            border-radius: 0.186667rem;
            background-color: #e6e6e6;
            color: #acacac;
            font-size: 0.32rem;
          }
        }
        .demo-title {
          margin: 0.266667rem 0;
          line-height: 0.533333rem;
          font-size: 0.4rem;
          color: #333333;
        }
        .demo-shop {
          font-size: 0.293333rem;
          color: #999999;
        }
      }
    }
  }
}
</style>